<template>
  <div class="table-search-page">
    <div class="g-tabs-wrapper">
      <a-tabs  @change="changeTabs" type="line" >
        <a-tab-pane :key="1" tab="全部"></a-tab-pane>
        <a-tab-pane :key="2" tab="已回访" ></a-tab-pane>
        <a-tab-pane :key="3" tab="待回访"></a-tab-pane>
      </a-tabs>
    </div>
    <a-card class="g-mt-10" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form :form="form" layout="inline" :selfUpdate="true">
          <a-row :gutter="12"  >
            <a-col :md="12" :lg="7" :sm="12" >
              <a-form-item label="计划回访时间">
                <a-range-picker
                  allow-clear
                  valueFormat="YYYY-MM-DD"
                   v-decorator="['PlanTime',{ initialValue:[moment_now_date ,moment_now_date]}]"
                  :disabledDate="disabledDate"
                  @calendarChange="changeDate"
                  style="width: 100%;">
                  <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="6" :sm="12" >
              <a-form-item label="计划回访人">
                <a-select
                  @search="select_search_scoutManId"
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['scoutManId']"
                  placeholder="选择计划回访人，可搜索" >
                  <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="6" :sm="12" >
              <a-form-item label="回访类型">
                <a-select allow-clear style="width: 100%" v-decorator="['scoutTheme']" placeholder="请选择回访类型" >
                  <a-select-option v-for="(item,index) in customerFeedback.feedbackType" :key="index" :value="item.name" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" >
              <div class="table-page-search-submitButtons g-flex" style="margin-bottom: 4px;">
                <a-icon :type="advanced ? 'up' : 'down'" @click="advanced=!advanced" style="margin-right: 15px;" />
                <a-button type="primary" @click="clickSearch">查询</a-button>
                <a-button @click="clickReset">重置</a-button>
              </div>
            </a-col>
          </a-row>
          <a-row v-show="advanced" :gutter="12" type="flex" >
            <a-col :md="12" :lg="7" :sm="12" >
              <a-form-item label="实际回访时间">
                <a-range-picker allow-clear v-decorator="['RealTime']" style="width: 100%;">
                  <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="6" :sm="12" >
              <a-form-item label="实际回访人">
                <a-select
                  @search="select_search_actualScoutManId"
                  :showSearch="true"
                  allow-clear
                  option-filter-prop="children"
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['actualScoutManId']"
                  placeholder="选择实际回访人，可搜索" >
                  <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="6" :sm="12" >
              <a-form-item label="回访方式">
                <a-select allow-clear style="width: 100%" v-decorator="['scoutMode']" placeholder="选择回访方式" >
                  <a-select-option v-for="(item,index) in customerFeedback.feedbackMethod" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-show="advanced" :gutter="12" type="flex" >
            <a-col :md="12" :lg="7" :sm="12" >
              <a-form-item label="客户姓名">
                <a-input  v-decorator="['name']" style="width: 100%" allow-clear placeholder="姓名"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="6" :sm="12" >
              <a-form-item label="客户卡号">
                <a-input v-decorator="['cardNo']" allow-clear placeholder="客户卡号"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="6" :sm="12" >
              <a-form-item label="联系号码">
                <a-input v-decorator="['mobile']" allow-clear placeholder="联系号码"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <a-card :bordered="false">
      <super-table
        :pageSize="10"
        size="small"
        :scroll="{ x: 1300}"
        ref="table"
        ls_props_columns="customerSceneList"
        :rowKey="(record,index)=> index"
        :columns="columns"
        :data="loadData"
      >

        <!--序号-->
        <template slot="index" slot-scope="text,record,index">
          <span style="margin-left: 7px;">{{(queryParam.pageNum-1)*pagination.pageSize+(index+1)}}</span>
        </template>
        <!--客户卡号-->
        <template slot="cardNo" slot-scope="text,record">
          <div class="g-flex g-y-center">
            <a class="g-f-14"  @click="toDetails(text, record)">{{ text }}</a>
            <a-tooltip placement="top">
              <template slot="title"> 复制 </template>
              <a-icon type="copy" @click="ConCopy(text)" theme="twoTone" two-tone-color="#3399ff" style="margin-left: 10px;cursor: pointer;" />
            </a-tooltip>
          </div>
        </template>
        <!--回访状态-->
        <template slot="scoutState" slot-scope="scoutState" >
          <div v-if="scoutState==1" class="g-flex g-y-center" style="color: #3399FF;">
            <div style="width: 6px;height: 6px;border-radius: 50%;background:#3399FF;margin-right: 10px; "></div>已回访
          </div>
          <div v-else-if="scoutState==2" class="g-flex g-y-center" style="color: #999999;">
            <div style="width: 6px;height: 6px;border-radius: 50%;background:#999999;margin-right: 10px; "></div>已取消
          </div>
          <div v-else class="g-flex g-y-center" style="color: #FC9C17;">
            <div style="width: 6px;height: 6px;border-radius: 50%;background:#FC9C17;margin-right: 10px; "></div>待回访
          </div>
        </template>
        <!--回访内容-->
        <template slot="scoutContent" slot-scope="text">
          <a-tooltip  placement="bottomLeft">
            <template slot="title">{{ text }}</template>
            <span > {{ text }}</span>
          </a-tooltip>
        </template>
        <template  slot="action" slot-scope="record" >
          <div  class="g-flex g-color g-f-14" style="cursor: pointer;" >
            <a-button class="g-bt-pad-0" type="link" @click="queryTelNumber(record)">呼叫</a-button>
            <a-button class="g-bt-pad-0" style="margin-right: 15px;" @click="clickAdd(record)" type="link">新增</a-button>
            <a-button class="g-bt-pad-0" style="margin-right: 15px;" :disabled="record.checkScoutState!=0" @click="clickEdit(record)" type="link">编辑</a-button>
            <a-button class="g-bt-pad-0" :disabled="record.scoutState!=0" @click.stop="clickCancel(record)" type="link">取消</a-button>
            
            <!-- <a-button class="g-bt-pad-0" style="margin-right: 15px;" :disabled="record.checkScoutState!=0" @click="clickEdit(record)" type="link">编辑</a-button>
            <a-button class="g-bt-pad-0" :disabled="record.checkScoutState!=0" @click.stop="clickCancel(record)" type="link">取消</a-button> -->


          </div>
        </template>
      </super-table>
    </a-card>
    <!--新增回访--弹窗-->
    <add-return-visit-form ref="addReturnVisitForm" :modal_type="modal_type" :row_record="current_row_record" />
    <call-select  :tel_arr="tel_arr" ref="CallSelect"></call-select>
  </div>
</template>

<script>
import {CustomerFeedback, ReturnVisitList} from '@/api/modular/main/customer/customerReturnVisit'
import {SuperTable} from '@/components'
import addReturnVisitForm from '@/views/customer/customerReturnVisit/addReturnVisitForm'
import moment from 'moment'
import { AllHisUser, getUserTel } from '@/api/customer/customer'
import CallSelect from '@/components/Phone/CallSelect'
import moment_date from '@/utils/date'
export default {
  components:{
    SuperTable,
    addReturnVisitForm,
    CallSelect
  },
  data() {
    return {
      moment_now_date:moment_date.now_date,
      start_date:this.moment_now_date,
      disabled_date:false,
      tel_arr:[],//联系号码数组
      loadData: parameter => {
        // console.log('parameter',parameter)
        this.queryParam.pageNum=parameter.pageNum||1
        this.queryParam.pageSize=parameter.pageSize||10
        return ReturnVisitList(this.queryParam).then(res => {
          return res
        })
      },
      form: this.$form.createForm(this),
      // 高级搜索 展开/关闭
      advanced: false,
      disabled:true, //是否禁用新增按钮
      current_row_record:{},
      modal_type:'add',
      columns : [
        { title: '序号', fixed: 'left', width: 60, scopedSlots: { customRender: 'index' } },
        { title: '客户卡号', dataIndex: 'cardNo', key: 'cardNo', sorter: (a, b) => a.cardNo - b.cardNo, width: 150, fixed: 'left', scopedSlots: { customRender: 'cardNo' }, },
        { title: '回访状态', dataIndex: 'scoutState', width: 100, fixed: 'left', scopedSlots: { customRender: 'scoutState' } },
        { title: '客户姓名', dataIndex: 'name', width: 110, },
        { title: '计划回访时间', dataIndex: 'planScoutDate', key: 'planScoutDate', sorter: (a, b) => a.planScoutDate<b.planScoutDate?1:-1, width: 160 },
        { title: '咨询师', dataIndex: 'consultMan', width: 110 },
        { title: '回访类型', dataIndex: 'scoutTheme', width: 150 },
        { title: '信息来源', dataIndex: 'infoSource', width: 120 },
        { title: '回访方式', dataIndex: 'scoutMode', width: 120, },
        { title: '回访内容', dataIndex: 'scoutContent',scopedSlots: { customRender: 'scoutContent' }, width:150, ellipsis: true },
        { title: '接听状态', dataIndex: 'receiveState', width:120 },
        { title: '计划回访人', dataIndex: 'scoutMan', width: 120 },
        { title: '实际回访时间', dataIndex: 'actualScoutDate', width: 120, ellipsis: true },
        { title: '实际回访人', dataIndex: 'actualScoutManId', width: 120 },
        { title: '取消人', dataIndex: 'cancelManId', width:120 },
        { title: '取消原因', dataIndex: 'cancelReason', width: 120, ellipsis: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, fixed: 'right', width: 170 },
      ],
      data: [],
      pagination: {
        current: 1,//当前页
        pageSize: 10,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `共有 ${total} 条数据`,//分页中显示总的数据
      },
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数
        PlanTimeStart: undefined, //计划回访时间 ---开始
        PlanTimeEnd: undefined, //计划回访时间 --结束
        RealTimeStart:undefined,//实际回访时间 --开始
        RealTimeEnd:undefined, //实际回访时间 --结束
        scoutManId:undefined, //计划回访人
        actualScoutManId:undefined, //实际回访人
        scoutTheme:undefined, //回访类型
        scoutMode:undefined, //回访方式
        ButtonType:undefined,//按钮类型
        scoutState:undefined,//回访状态
      },
      loading: true, //加载状态,
      current_row_index:'',
      customerFeedback:{},
      allHisUser:{} //回访人对象
    }
  },
  activated(){
     this.$refs.table.refresh()
  },
  created() {
     this.getList()
     this.getBaseFormInfo() 
  },
  methods: {
    /**
     * 日期改变
     */
    changeDate(date){
      if(date.length==1){
        this.disabled_date=true
        this.start_date = date[0]
      }else{
        this.disabled_date=false
      }
    },
    /**
     * 约束结束日期
     */
    disabledDate(current){
      const time = this.form.getFieldValue('PlanTime')
      const range = 7
      const unit ='d'
      const start = this.start_date
      if (!time) {
        return false
      }
      if(this.disabled_date){
        return current < moment(start).subtract(range,unit) || current > moment(start).add (range,unit)
      }
      return false

    },
    queryTelNumber(record){
      console.log(record)
      const id =record.customerId
      getUserTel(id).then(res=>{
        console.log('电话号码：',res)
        this.tel_arr=res.data
        this.$refs.CallSelect.show()
      })
    },
    //点击查看客户详情
    toDetails(text,record){
      console.log(record)
      this.$router.push({path:'customer_details',query:{
          id:record.customerId,
          card_no:record.cardNo,
          customerName:record.name
      }})
    },
    checkPattern(str){
      const pattern = new RegExp('[\u4E00-\u9FA5]+')
      if(pattern.test(str)){
        return true
      }
      return false
    },
    //下拉框搜索查找
    select_search_scoutManId(value){
      this.form.setFieldsValue({
        scoutManId:value
      })
    },
    //下拉框搜索查找
    select_search_actualScoutManId(value){
      this.form.setFieldsValue({
        actualScoutManId:value
      })
    },
    moment,

    currentRow(record,index){
      return index==this.current_row_index?'currentRowClass':''
    },
    clickSearch(){
      const form_values = this.form.getFieldsValue()
      const PlanTime = form_values.PlanTime
      if(PlanTime&&PlanTime.length>0){
        form_values.PlanTimeStart=moment(PlanTime[0]).format('YYYY-MM-DD')
        form_values.PlanTimeEnd=moment(PlanTime[1]).format('YYYY-MM-DD')
        form_values.PlanTime=undefined

      }

      const RealTime = form_values.RealTime
      if(RealTime&&RealTime.length>0){
        form_values.RealTimeStart=moment(RealTime[0]).format('YYYY-MM-DD')
        form_values.RealTimeEnd=moment(RealTime[1]).format('YYYY-MM-DD')
        form_values.RealTime=undefined
      }
      /**下拉框搜索**/
      const tempscoutManIdFlag = this.checkPattern(form_values.scoutManId)
      const tempactualScoutManIdFlag = this.checkPattern(form_values.actualScoutManId)

      let tempscoutManIdValue
      let tempactualScoutManIdValue
      if(tempscoutManIdFlag){
        const obj = this.allHisUser.userList.filter(item=>form_values.scoutManId == item.name)[0]
        tempscoutManIdValue = form_values.scoutManId
        form_values.scoutManId=obj?obj.id:tempscoutManIdValue
      }
      if(tempactualScoutManIdFlag){
        const obj = this.allHisUser.userList.filter(item=>form_values.actualScoutManId == item.name)[0]
        tempactualScoutManIdValue = form_values.actualScoutManId
        form_values.actualScoutManId=obj?obj.id:tempactualScoutManIdValue
      }

      this.queryParam = Object.assign(this.queryParam,form_values)
      console.log('查询参数queryParam',this.queryParam)
      this.$refs.table.refresh(true)
      setTimeout(()=>{
        if(tempscoutManIdFlag){
          this.form.setFieldsValue({
            scoutManId:tempscoutManIdValue
          })
        }
        if(tempactualScoutManIdFlag){
          this.form.setFieldsValue({
            actualScoutManId:tempactualScoutManIdValue
          })
        }
      },500)
    },
    clickReset(){
      this.form.resetFields()
      this.queryParam={}
      this.queryParam.pageSize=10
      this.queryParam.pageNum=1
      this.moment_now_date=undefined
      // this.queryParam.PlanTimeStart=undefined
      // this.queryParam.PlanTimeEnd=undefined
      // this.queryParam.RealTimeStart=undefined
      // this.queryParam.RealTimeEnd=undefined
      // this.queryParam.PlanTimeStart=undefined
      // this.queryParam.PlanTimeStart=undefined
      // this.queryParam.scoutManId=undefined
      // this.queryParam.actualScoutManId=undefined
      // this.queryParam.scoutTheme=undefined
      // this.queryParam.scoutMode=undefined
    },
    clickAdd(record){
      this.modal_type='add'
      this.current_row_record=record
      this.$refs.addReturnVisitForm.add()
    },
    clickEdit(record){
      this.modal_type='edit'
      this.current_row_record=record
      this.$refs.addReturnVisitForm.add()
    },
    clickCancel(record){
      this.modal_type='cancel'
      // console.log('当前行的数据为',record)
      this.current_row_record=record
      this.$refs.addReturnVisitForm.add()
    },

    changeTabs(key) {
      //全部
      if(key==1){
        this.queryParam.scoutState = undefined
      }
      //已回访
      if(key==2){
        this.queryParam.scoutState = 1
      }
      //待回访
      if(key==3){
        this.queryParam.scoutState = 0
      }
      this.$refs.table.loadData()
    },
    //获取客户回访列表
    getList() {
      this.loading = true
      ReturnVisitList(this.queryParam).then(res => {
        this.data = res.rows
        this.pagination.total =parseInt( res.total)
        this.loading = false//关闭加载
      })
    },
    // 表格行点击事件
    clickRow(record, index){
      return {
        on: {
          click:()=>{
            // console.log('点击当前行',record)
            this.disabled=false
            this.current_row_index=index
            this.current_row_record=record
          }
        }
      }
    },
    //获取表单相关接口
    getBaseFormInfo(){
      CustomerFeedback().then(res=>{
        // console.log('回访相关表单接口',res)
        this.customerFeedback=res
      })
      AllHisUser().then(res=>{
        // console.log('全员员工接口',res)
        this.allHisUser=res
      })
    },
  }

}
</script>

<style lang="less">

.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
  margin-bottom: 2px;
}
.currentRowClass{
  background: #e6f7ff;
}
</style>